@dxos/react-ui-editor 0.8.1-main.ae460ac → 0.8.1-staging.391c573

package/dist/lib/browser/index.mjs

@@ -2053,9 +2053,6 @@ import { isNonNullable } from "@dxos/util";
 import { Transaction } from "@codemirror/state";
 import { EditorView as EditorView8, keymap as keymap4 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/selection.ts";
 var documentId = singleValueFacet();
 var stateRestoreAnnotation = "dxos.org/cm/state-restore";
 var createEditorStateTransaction = ({ scrollTo, selection }) => {
@@ -2068,34 +2065,10 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
   };
 };
-var createEditorStateStore = (keyPrefix) => ({
-  getState: (id) => {
-    invariant3(id, void 0, {
-      F: __dxlog_file6,
-      L: 47,
-      S: void 0,
-      A: [
-        "id",
-        ""
-      ]
-    });
-    const state = localStorage.getItem(`${keyPrefix}/${id}`);
-    return state ? JSON.parse(state) : void 0;
-  },
-  setState: (id, state) => {
-    invariant3(id, void 0, {
-      F: __dxlog_file6,
-      L: 53,
-      S: void 0,
-      A: [
-        "id",
-        ""
-      ]
-    });
-    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
-  }
-});
-var selectionState = ({ getState, setState } = {}) => {
+var selectionState = (state = {}) => {
+  const setState = (id, selectionState2) => {
+    state[id] = selectionState2;
+  };
   const setStateDebounced = debounce(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
@@ -2109,41 +2082,39 @@ var selectionState = ({ getState, setState } = {}) => {
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
       }
-      if (setState) {
-        const { scrollTop } = view.scrollDOM;
-        const pos = view.posAtCoords({
-          x: 0,
-          y: scrollTop
+      const { scrollTop } = view.scrollDOM;
+      const pos = view.posAtCoords({
+        x: 0,
+        y: scrollTop
+      });
+      if (pos !== null) {
+        const { anchor, head } = view.state.selection.main;
+        setStateDebounced(id, {
+          scrollTo: pos,
+          selection: {
+            anchor,
+            head
+          }
         });
-        if (pos !== null) {
-          const { anchor, head } = view.state.selection.main;
-          setStateDebounced(id, {
-            scrollTo: pos,
-            selection: {
-              anchor,
-              head
-            }
-          });
-        }
       }
     }),
-    getState && keymap4.of([
+    keymap4.of([
       {
         key: "ctrl-r",
         run: (view) => {
-          const state = getState(view.state.facet(documentId));
-          if (state) {
-            view.dispatch(createEditorStateTransaction(state));
+          const selection = state[view.state.facet(documentId)];
+          if (selection) {
+            view.dispatch(createEditorStateTransaction(selection));
           }
           return true;
         }
       }
     ])
-  ].filter(isNotFalsy2);
+  ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var setComments = StateEffect3.define();
 var setSelection = StateEffect3.define();
 var setCommentState = StateEffect3.define();
@@ -2213,7 +2184,7 @@ var commentsDecorations = EditorView9.decorations.compute([
     const range = comment.range;
     if (!range) {
       log4.warn("Invalid range:", range, {
-        F: __dxlog_file7,
+        F: __dxlog_file6,
         L: 144,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2665,7 +2636,7 @@ import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
 import { generateName } from "@dxos/display-name";
 import { log as log5 } from "@dxos/log";
-import { hexToHue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
+import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/focus.ts
 import { StateEffect as StateEffect4, StateField as StateField6 } from "@codemirror/state";
@@ -2699,7 +2670,7 @@ var focus = [
 ];
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var preventNewline = EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
 var defaultBasicOptions = {
   allowMultipleSelections: true,
@@ -2725,7 +2696,7 @@ var createBasicExtensions = (_props) => {
     // NOTE: Doesn't catch errors in keymap functions.
     EditorView12.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
-        F: __dxlog_file8,
+        F: __dxlog_file7,
         L: 96,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2771,8 +2742,8 @@ var createBasicExtensions = (_props) => {
         preventDefault: true,
         run: () => true
       }
-    ].filter(isNotFalsy3))
-  ].filter(isNotFalsy3);
+    ].filter(isNotFalsy2))
+  ].filter(isNotFalsy2);
 };
 var defaultThemeSlots = {
   editor: {
@@ -2792,7 +2763,7 @@ var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _
     slots.content?.className && EditorView12.contentAttributes.of({
       class: slots.content.className
     })
-  ].filter(isNotFalsy3);
+  ].filter(isNotFalsy2);
 };
 var createDataExtensions = ({ id, text, space, identity }) => {
   const extensions = [];
@@ -2817,42 +2788,81 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/folding.tsx
-import { codeFolding, foldGutter } from "@codemirror/language";
+import { codeFolding, foldGutter, foldedRanges, foldEffect } from "@codemirror/language";
 import { EditorView as EditorView13 } from "@codemirror/view";
 import React3 from "react";
+import { debounce as debounce3 } from "@dxos/async";
 import { Icon } from "@dxos/react-ui";
-var folding = (_props = {}) => [
-  codeFolding({
-    placeholderDOM: () => {
-      return document.createElement("span");
-    }
-  }),
-  foldGutter({
-    markerDOM: (open) => {
-      const el = createElement("div", {
-        className: "flex h-full items-center"
+var folding = (state = {}) => {
+  const setState = (id, foldState) => {
+    state[id] = foldState;
+  };
+  const setStateDebounced = debounce3(setState, 1e3);
+  let initialized = false;
+  return [
+    codeFolding({
+      placeholderDOM: () => {
+        return document.createElement("span");
+      }
+    }),
+    foldGutter({
+      markerDOM: (open) => {
+        const el = createElement("div", {
+          className: "flex h-full items-center"
+        });
+        return renderRoot(el, /* @__PURE__ */ React3.createElement(Icon, {
+          icon: "ph--caret-right--regular",
+          size: 3,
+          classNames: [
+            "mx-3 cursor-pointer",
+            open && "rotate-90"
+          ]
+        }));
+      }
+    }),
+    EditorView13.theme({
+      ".cm-foldGutter": {
+        opacity: 0.3,
+        transition: "opacity 0.3s",
+        width: "32px"
+      },
+      ".cm-foldGutter:hover": {
+        opacity: 1
+      }
+    }),
+    EditorView13.updateListener.of(({ view }) => {
+      const id = view.state.facet(documentId);
+      if (!id) {
+        return;
+      }
+      if (!initialized) {
+        initialized = true;
+        const foldState2 = state[id];
+        if (foldState2?.foldedRanges?.length) {
+          view.dispatch({
+            effects: foldState2.foldedRanges.map((range) => foldEffect.of({
+              from: range.from,
+              to: range.to
+            }))
+          });
+        }
+        return;
+      }
+      const decorations = foldedRanges(view.state);
+      const ranges = [];
+      decorations.between(0, view.state.doc.length, (from, to) => {
+        ranges.push({
+          from,
+          to
+        });
       });
-      return renderRoot(el, /* @__PURE__ */ React3.createElement(Icon, {
-        icon: "ph--caret-right--regular",
-        size: 3,
-        classNames: [
-          "mx-3 cursor-pointer",
-          open && "rotate-90"
-        ]
-      }));
-    }
-  }),
-  EditorView13.theme({
-    ".cm-foldGutter": {
-      opacity: 0.3,
-      transition: "opacity 0.3s",
-      width: "32px"
-    },
-    ".cm-foldGutter:hover": {
-      opacity: 1
-    }
-  })
-];
+      const foldState = {
+        foldedRanges: ranges
+      };
+      setStateDebounced?.(id, foldState);
+    })
+  ];
+};
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
 import { EditorView as EditorView14 } from "@codemirror/view";
@@ -4274,7 +4284,7 @@ var convertTreeToJson = (state) => {
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect5 } from "@codemirror/state";
 import { EditorView as EditorView19, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-import { invariant as invariant4 } from "@dxos/invariant";
+import { invariant as invariant3 } from "@dxos/invariant";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
@@ -4733,7 +4743,7 @@ var TableWidget = class extends WidgetType4 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
   bullet: "\u2022",
@@ -4866,8 +4876,8 @@ var buildDecorations2 = (view, options, focus2) => {
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
-    invariant4(level > 0, void 0, {
-      F: __dxlog_file9,
+    invariant3(level > 0, void 0, {
+      F: __dxlog_file8,
       L: 178,
       S: void 0,
       A: [
@@ -4905,8 +4915,8 @@ var buildDecorations2 = (view, options, focus2) => {
     listLevels.pop();
   };
   const getCurrentListLevel = () => {
-    invariant4(listLevels.length, void 0, {
-      F: __dxlog_file9,
+    invariant3(listLevels.length, void 0, {
+      F: __dxlog_file8,
       L: 200,
       S: void 0,
       A: [
@@ -5229,7 +5239,7 @@ var linkTooltip = (render) => {
 // packages/ui/react-ui-editor/src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
 import { log as log6 } from "@dxos/log";
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ debug, onSearch }) => {
   return autocompletion2({
     // TODO(burdon): Not working.
@@ -5244,7 +5254,7 @@ var mention = ({ debug, onSearch }) => {
         log6.info("completion context", {
           context
         }, {
-          F: __dxlog_file10,
+          F: __dxlog_file9,
           L: 27,
           S: void 0,
           C: (f, a) => f(...a)
@@ -5381,8 +5391,8 @@ import { EditorView as EditorView20 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo4, useRef, useState } from "react";
 import { log as log7 } from "@dxos/log";
-import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+import { getProviderValue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
   const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo4(() => getProviderValue(props), deps ?? []);
@@ -5397,7 +5407,7 @@ var useTextEditor = (props = {}, deps = []) => {
         instanceId,
         doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file10,
         L: 75,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5423,13 +5433,13 @@ var useTextEditor = (props = {}, deps = []) => {
           // NOTE: This doesn't catch errors in keymap functions.
           EditorView20.exceptionSink.of((err) => {
             log7.catch(err, void 0, {
-              F: __dxlog_file11,
+              F: __dxlog_file10,
               L: 97,
               S: void 0,
               C: (f, a) => f(...a)
             });
           })
-        ].filter(isNotFalsy4)
+        ].filter(isNotFalsy3)
       });
       view2 = new EditorView20({
         parent: parentRef.current,
@@ -5455,7 +5465,7 @@ var useTextEditor = (props = {}, deps = []) => {
       log7("destroy", {
         id
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file10,
         L: 134,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5472,7 +5482,7 @@ var useTextEditor = (props = {}, deps = []) => {
             scrollTo,
             selection
           }, {
-            F: __dxlog_file11,
+            F: __dxlog_file10,
             L: 143,
             S: void 0,
             C: (f, a) => f(...a)
@@ -5498,7 +5508,7 @@ var useTextEditor = (props = {}, deps = []) => {
     autoFocus,
     view
   ]);
-  const focusableGroup = useFocusableGroup({
+  const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: "limited",
     ignoreDefaultKeydown: {
       Escape: view?.state.facet(editorInputMode).noTabster
@@ -5517,15 +5527,14 @@ var useTextEditor = (props = {}, deps = []) => {
   }, [
     view
   ]);
-  const focusAttributes = {
-    tabIndex: 0,
-    ...focusableGroup,
-    onKeyUp: handleKeyUp
-  };
   return {
     parentRef,
     view,
-    focusAttributes
+    focusAttributes: {
+      tabIndex: 0,
+      ...focusableGroupAttrs,
+      onKeyUp: handleKeyUp
+    }
   };
 };
 export {
@@ -5565,7 +5574,6 @@ export {
   createDataExtensions,
   createEditorAction,
   createEditorActionGroup,
-  createEditorStateStore,
   createEditorStateTransaction,
   createElement,
   createExternalCommentSync,